<template>
  <div style="background:#f5f5f5;" v-loading.fullscreen.lock="loading">
    <div class="unitTitle">设置单元</div>
    <div class="unitContent">
      <div class="planBox">
        <div class="planBoxTitle" :class="{'errorState':zywerrorState}">
          <i class="el-icon-tickets" style="font-size:18px;"></i>
          <span class="s_fs_16">选择投放资源位</span>
          <span class="errorTip" v-show="zywerrorState">
            <i class="el-icon-warning"></i>请至少选择一个资源位
          </span>
        </div>
        <div class="planBoxContent">
          <div class="text-center" v-show="!this.resourcesList.length">
            <div class="mb10"><i class="el-icon-tickets" style="font-size:38px;color:#ccc;"></i></div>
            <div class="fontsize-16">未选择任何资源位</div>
            <div><el-button class="btn" @click="resourcesShowModal" type="info">添加资源位</el-button></div>
          </div>
          <div class="mb20 mt20" v-show="this.resourcesList.length">
            <div class="toolbar mb20">
              <el-button type="primary" class="mr10" style="padding: 12px 10px;" @click="resourcesShowModal">
                <i class="el-icon-plus s_fs_12">󰀦</i>
                添加资源位
              </el-button>
              <el-button type="info" style="padding: 12px 10px;" @click="deleteAllResources" v-show="multipleSelection.length">
                <i class="el-icon-delete"></i>
                批量移除
              </el-button>
              <el-table
                :data="resourcesList"
                :max-height="460"
                style="width: 100%;"
                @selection-change="handleSelectionChange"
              >
                <el-table-column
                  type="selection"
                  width="75">
                </el-table-column>
                <el-table-column
                  fixed
                  prop="adzone_name"
                  label="资源位信息"
                  width="357">
                </el-table-column>
                <el-table-column
                  prop="allow_adv_type_name"
                  label="网站行业"
                  width="165">
                </el-table-column>
                <el-table-column
                  prop="adzone_level_name"
                  label="创意最低等级"
                  width="165">
                </el-table-column>
                <el-table-column
                  prop="tpv"
                  label="日均可竞流量"
                  width="169">
                </el-table-column>
                <el-table-column
                  label="创意类型"
                  width="169">
                  <template slot-scope="scope">
                    {{returnStr(scope.row.allow_ad_format_list_name)}}
                  </template>
                </el-table-column>
                <el-table-column
                  label="资源位尺寸"
                  width="169">
                  <template slot-scope="scope">
                    {{returnStr(scope.row.adzone_size_list)}}
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  width="133">
                  <template slot-scope="scope">
                    <el-button type="info" style="padding: 5px 10px;" @click="deleteResources(scope.$index)">移除</el-button>
                  </template>
                </el-table-column>

              </el-table>

            </div>

          </div>
          <resources v-on:resourcesData="listenResources" v-on:dialogData="listenResourcesDialog" :resources-msg="resourcesList" :resourcesDialog="resourcesDialog"></resources>
        </div>
      </div>
      <div class="planBox">
        <div class="planBoxTitle" :class="{'errorState':rqerrorState}">
          <n3-icon type="group" size='18px' class="dx_iconfont"></n3-icon>
          <span class="s_fs_16">设置定向人群</span>
          <span class="errorTip" v-show="rqerrorState">
            <i class="el-icon-warning"></i>请至少选择一个人群
          </span>
        </div>
        <div class="planBoxContent">
          <industry v-on:industryData="listenIndustry" :industry-msg="industryList"></industry>
          <div class="industryTip clearfix" v-if="industryList.length">
            <div class="contraget" v-for="(item,index) in industryList">
              <div class="text-overflow">
                <span><i v-if="item.industry_shop_group">{{item.industry_shop_group}}-</i>{{item.industry_shop_name}}</span>
                <el-button size="medium" @click="industryDelete(index)" class="delete" type="info">移除</el-button>
              </div>
              <ul class="ml140" v-if="resourcesList.length">
                <li class="pr" v-for="(val,i) in resourcesList">
                  <div class="s_fc_9">{{val.adzone_name}}</div>
                  <div class="lh28">
                    <div class="clearfix">
                      <span class="fl w100">出价</span>
                      <label class="fl w100 w101">
                        <input class="input input-small" v-model="item.matrix_price[val.adzone_id]"
                               :ref="'industry_shop_id'+item.industry_shop_id+'_'+val.adzone_id" @input="changeprice(item,index,val,i,'industry_shop_id')"> 元
                        <div class="ux-valid"><p class="estate"><span class="label">必须大于0，小于等于计划日预算，当前计划日预算是{{day_budget}} 元。</span></p></div></label>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <shop v-on:shopData="listenShop" v-on:mineData="listenMine" :shop-msg="shopList"></shop>
          <div class="industryTip clearfix" v-if="shopList.length">
            <div class="contraget" v-for="(item,index) in shopList">
              <div class="text-overflow">
                <span>{{returnTips(item)}}</span>
                <el-button size="medium" @click="shopDelete(index)" class="delete" type="info">移除</el-button>
              </div>
              <ul class="ml140" v-if="resourcesList.length">
                <li class="pr" v-for="(val,i) in resourcesList">
                  <div class="s_fc_9">{{val.adzone_name}}</div>
                  <div class="lh28">
                    <div class="clearfix">
                      <span class="fl w100">出价</span>
                      <label class="fl w100 w101">
                        <input class="input input-small" v-model="item.matrix_price[val.adzone_id]"
                               :ref="'behavior_value'+item.behavior_value+'_'+val.adzone_id" @input="changeprice(item,index,val,i,'behavior_value')"> 元
                        <div class="ux-valid" v-show="false"><p class="estate"><span class="label">必须大于0，小于等于计划日预算，当前计划日预算是 {{day_budget}}元。</span></p></div></label>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <category v-on:categoryData="listenCategory" :category-msg="categoryList"></category>
          <div class="industryTip clearfix" v-if="categoryList.length">
            <div class="contraget" v-for="(item,index) in categoryList">
              <div class="text-overflow">
                <span>{{item.option_name}}({{item.cat_name}})</span>
                <el-button size="medium" @click="categoryDelete(index)" class="delete" type="info">移除</el-button>
              </div>
              <ul class="ml140" v-if="resourcesList.length">
                <li class="pr" v-for="(val,i) in resourcesList">
                  <div class="s_fc_9">{{val.adzone_name}}</div>
                  <div class="lh28">
                    <div class="clearfix">
                      <span class="fl w100">出价</span>
                      <label class="fl w100 w101">
                        <input class="input input-small" v-model="item.matrix_price[val.adzone_id]"
                               :ref="'option_value'+item.option_value+'_'+val.adzone_id" @input="changeprice(item,index,val,i,'option_value')"> 元
                        <div class="ux-valid"><p class="estate"><span class="label">必须大于0，小于等于计划日预算，当前计划日预算是{{day_budget}} 元。</span></p></div></label>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <similar v-on:similarData="listensimilar" :similar-msg="similarList"></similar>
          <div class="industryTip clearfix" v-if="similarList.length">
            <div class="contraget" v-for="(item,index) in similarList">
              <div class="text-overflow">
                <span>{{item.type}}:{{item.item_name}}</span>
                <el-button size="medium" @click="similarDelete(index)" class="delete" type="info">移除</el-button>
              </div>
              <ul class="ml140" v-if="resourcesList.length">
                <li class="pr" v-for="(val,i) in resourcesList">
                  <div class="s_fc_9">{{val.adzone_name}}</div>
                  <div class="lh28">
                    <div class="clearfix">
                      <span class="fl w100">出价</span>
                      <label class="fl w100 w101">
                        <input class="input input-small" v-model="item.matrix_price[val.adzone_id]"
                               :ref="'item_id'+item.id+item.item_id+'_'+val.adzone_id" @input="changeprice(item,index,val,i,'item_id')"> 元
                        <div class="ux-valid"><p class="estate"><span class="label">必须大于0，小于等于计划日预算，当前计划日预算是{{day_budget}} 元。</span></p></div></label>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <intelligence v-on:intelligenceData="listenIntelligence" :intelligence-msg="intelligenceList"></intelligence>
          <div class="industryTip clearfix" v-if="intelligenceList.length">
            <div class="contraget" v-for="(item,index) in intelligenceList">
              <div class="text-overflow">
                <span>{{item.type}}:{{item.scale_desc}}</span>
                <el-button size="medium" @click="intelligenceDelete(index)" class="delete" type="info">移除</el-button>
              </div>
              <ul class="ml140" v-if="resourcesList.length">
                <li class="pr" v-for="(val,i) in resourcesList">
                  <div class="s_fc_9">{{val.adzone_name}}</div>
                  <div class="lh28">
                    <div class="clearfix">
                      <span class="fl w100">出价</span>
                      <label class="fl w100 w101">
                        <input class="input input-small" v-model="item.matrix_price[val.adzone_id]"
                               :ref="'id'+item.id+'_'+val.adzone_id" @input="changeprice(item,index,val,i,'id')"> 元
                        <div class="ux-valid"><p class="estate"><span class="label">必须大于0，小于等于计划日预算，当前计划日预算是{{day_budget}} 元。</span></p></div></label>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <marketing v-on:marketingData="listenMarketing" :marketing-msg="marketingList"></marketing>
          <div class="industryTip clearfix" v-if="marketingList.length">
            <div class="contraget" v-for="(item,index) in marketingList">
              <div class="text-overflow">
                <span>{{returnmarketTips(item)}}</span>
                <el-button size="medium" @click="marketingDelete(index)" class="delete" type="info">移除</el-button>
              </div>
              <ul class="ml140" v-if="resourcesList.length">
                <li class="pr" v-for="(val,i) in resourcesList">
                  <div class="s_fc_9">{{val.adzone_name}}</div>
                  <div class="lh28">
                    <div class="clearfix">
                      <span class="fl w100">出价</span>
                      <label class="fl w100 w101">
                        <input class="input input-small" v-model="item.matrix_price[val.adzone_id]"
                               :ref="'value'+item.value+'_'+val.adzone_id" @input="changeprice(item,index,val,i,'value')"> 元
                        <div class="ux-valid"><p class="estate"><span class="label">必须大于0，小于等于计划日预算，当前计划日预算是{{day_budget}}元。</span></p></div></label>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <visitor v-on:visitorData="listenVisitor" :visitor-msg="visitorList"></visitor>
          <div class="industryTip clearfix" v-if="visitorList.length">
            <div class="contraget" v-for="(item,index) in visitorList">
              <div class="text-overflow">
                <span>{{item.name}}</span>
                <el-button size="medium" @click="visitorDelete(index)" class="delete" type="info">移除</el-button>
              </div>
              <ul class="ml140" v-if="resourcesList.length">
                <li class="pr" v-for="(val,i) in resourcesList">
                  <div class="s_fc_9">{{val.adzone_name}}</div>
                  <div class="lh28">
                    <div class="clearfix">
                      <span class="fl w100">出价</span>
                      <label class="fl w100 w101">
                        <input class="input input-small" v-model="item.matrix_price[val.adzone_id]"
                               :ref="'id'+item.id+'_'+val.adzone_id" @input="changeprice(item,index,val,i,'id')"> 元
                        <div class="ux-valid"><p class="estate"><span class="label">必须大于0，小于等于计划日预算，当前计划日预算是{{day_budget}}元。</span></p></div></label>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="mt10">
            <div class="clearfix">
              <span class="mr10">通投</span>
              <span class="s_fc_9 mr10" style="max-width: 76%;" title="不限人群投放">不限人群投放</span>
              <el-switch
                v-model="tongtou"
                active-color="#4d7fff"
                inactive-color="#ccc">
              </el-switch>
            </div>
          </div>
          <div class="industryTip clearfix" v-if="tongtou">
            <div class="contraget" v-for="(item,index) in tongtouList">
              <ul class="ml140" v-if="resourcesList.length">
                <li class="pr" v-for="(val,i) in resourcesList">
                  <div class="s_fc_9">{{val.adzone_name}}</div>
                  <div class="lh28">
                    <div class="clearfix">
                      <span class="fl w100">出价</span>
                      <label class="fl w100 w101">
                        <input class="input input-small" v-model="tongtouPrice[i]" @input="changetongtouprice(val,i)"> 元
                        <div class="ux-valid" :ref="'tongtouTip'+i"><p class="estate"><span class="label">必须大于0，小于等于计划日预算，当前计划日预算是{{day_budget}}元。</span></p></div></label>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <dharma v-model="dharmaCheck"></dharma>
          <div class="industryTip clearfix" v-if="dharmaCheck.length">
            <div class="contraget" v-for="(item,index) in dharmaCheck">
              <div class="text-overflow">
                <span>{{item.dmp_crowd_name}}</span>
                <el-button size="medium" @click="dharmaDelete(index)" class="delete" type="info">移除</el-button>
              </div>
              <ul class="ml140" v-if="resourcesList.length">
                <li class="pr" v-for="(val,i) in resourcesList">
                  <div class="s_fc_9">{{val.adzone_name}}</div>
                  <div class="lh28">
                    <div class="clearfix">
                      <span class="fl w100">出价</span>
                      <label class="fl w100 w101">
                        <input class="input input-small" v-model="item.matrix_price[val.adzone_id]"
                               :ref="'dmp_crowd_id'+item.dmp_crowd_id+'_'+val.adzone_id" @input="changeprice(item,index,val,i,'dmp_crowd_id')"> 元
                        <div class="ux-valid"><p class="estate"><span class="label">必须大于0，小于等于计划日预算，当前计划日预算是{{day_budget}}元。</span></p></div></label>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="planFooter">
      <el-button type="primary" size="medium" @click="toPage('next')">下一步，添加创意</el-button>
      <el-button type="primary" size="medium" @click="toPage()">完成计划,暂不添加创意</el-button>
      <el-button size="medium" @click="goBack()">返回上一步</el-button>
    </div>
    <div class="bottomTip" v-show="endError.warning">
      <span style="color: #a62a22;"><i class="el-icon-warning"></i>{{endError.text}}</span>
    </div>
  </div>
</template>
<style src="./style.styl" scoped lang="stylus"></style>
<script src="./script.js"></script>
